<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>确认订单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../css/mui.css">
    <link rel="stylesheet" href="../../css/mycss/wuliu.css">
    <link rel="stylesheet" href="../../fonts/iconfont.css">
    <style>
        ul{margin-left: -20px;}
        ul li{list-style: none;margin:0;padding:0;}
        .track-list{ position: relative;}
        .track-list li{position: relative; padding: 9px 0 0 25px; line-height: 30px; border-left: 1px solid #d9d9d9; color: #999;}
        .track-list li.first{color: rgb(254,31,110); padding-top: 0; border-left-color: #fff;}
        .track-list li .node-icon{position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; background: url(http://demo.daimabiji.com/3531/img/order-icons.png)  -21px -72px no-repeat;}
        .track-list li .checked-icon{position: absolute; left: -10px; top: 50%; width: 20px; height: 20px; background: url(../../images/红色钩.png) no-repeat;background-size: 100%;}
        .track-list li .dd-icon{position: absolute; left: -6px; top: 50%; width: 11px; height: 11px; background: url(../../images/dd.png)  no-repeat;background-size: 100%;}
        .track-list li.first .node-icon{background-position:0 -72px;}
        .track-list li.first .dd-icon{background-position:0 -72px;}
        .track-list li .time{margin-right: 20px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
        .track-list li .txt{max-width: 600px; position: relative; top: 4px; display: inline-block; vertical-align: middle;}
        .track-list li.first .time{margin-right: 20px; }
        .track-list li.first .txt{max-width: 600px; }
    </style>
</head>
<body style="background-color: rgb(236,239,243);max-width: 414px;margin: auto;">

<header id="header" class="mui-bar mui-bar-nav" style="max-width: 414px;margin: auto;background-color:rgb(0,145,219);">
    <a style="color: white; " class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <div class="mui-title" style="color: white;text-align: left;margin-left: 20px">快递详情</div>
</header>

<div class="mui-content">
    <div class="tit mui-row" style="padding: 15px 10px 10px 10px;background-color: white">
        <div class="mui-col-xs-1" >
            <div class="div-fj-img" style="text-align: right;">
                <img style="width:40px;" src="../../images/fj.png">
            </div>
        </div>
        <div class="mui-col-xs-9">
            <div class="div-wl-art" style="margin-left: 20px;line-height: 1;">
                <p><span style="font-weight:500;">物流公司:&nbsp&nbsp </span><span style="color: #222222;font-weight: 600">顺丰快递</span></p>
                <p><span style="font-weight:500;">物流单号:&nbsp&nbsp </span><span style="color: #222222;font-weight: 600">123456789</span></p>
            </div>
        </div>
        <div class="mui-col-xs-2">
            <button style="color: #8f8f94;font-size: 12px;">复制</button>
        </div>
    </div>

    <div class="bod mui-row" style="padding: 10px;background-color: white;height: 1000px;margin-top: 10px;">
        <p><span style="font-size: 16px;color: #323232">订单跟踪</span></p>
        <div class="track-rcol">
            <div class="track-list">
                <ul style="font-size: 14px;">
                    <li class="first" style="line-height: 20px">
                        <i class="checked-icon"></i>
                        <span class="txt" style="color: rgb(254,31,110); padding-top: 0; border-left-color: #fff;">感谢您在京东购物，欢迎您再次光临！</span><br />
                        <span class="time" style="color: rgb(254,31,110); padding-top: 0; border-left-color: #fff;font-size: 12px;">2016-03-10 18:07:15</span>
                    </li>
                    <li>
                        <i class="dd-icon"></i>
                        <span class="txt" style="color: #222222;line-height: 1.5">【京东到家】京东配送员【申国龙】已出发，联系电话【18410106883，感谢您的耐心等待，参加评价还能赢取京豆呦】</span><br />
                        <span style="font-size: 12px;" class="time">2016-03-10 18:07:15</span>
                    </li>
                    <li>
                        <i  class="dd-icon"></i>
                        <span class="txt">感谢您在京东购物，欢迎您再次光临！</span><br />
                        <span style="font-size: 12px;" class="time">2016-03-10 18:07:15</span>
                    </li>
                    <li>
                        <i class="dd-icon"></i>
                        <span class="txt">感谢您在京东购物，欢迎您再次光临！</span><br />
                        <span style="font-size: 12px;" class="time">2016-03-10 18:07:15</span>
                    </li>
                    <li>
                        <i class="dd-icon"></i>
                        <span class="txt">感谢您在京东购物，欢迎您再次光临！</span><br />
                       <span  style="font-size: 12px;" class="time">2016-03-10 18:07:15</span>
                    </li>

                    <li>
                        <i class="dd-icon"></i>
                        <span class="txt">订单打单完成</span><br />
                        <span style="font-size: 12px;" class="time">2016-03-10 18:07:15</span>
                    </li>
                    <li>
                        <i class="dd-icon"></i>
                        <span class="txt">订单支付成功，等待仓库发货</span><br />
                        <span style="font-size: 12px;" class="time">2016-03-10 18:07:15</span>
                    </li>
                    <li>
                        <i class="dd-icon"></i>
                        <span class="txt">订单提交成功</span><br />
                        <span style="font-size: 12px;" class="time">2016-03-10 18:07:15</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>



<script src="../../js/mui.js"></script>
<script src="../../js/myjs/wuliu.js"></script>
<script src="../../js/myjs/url.js"></script>
</body>

</html>